<!--  -->
<template>
    <div class="table-temp">
        <template v-if="tableData.length > 0">
            <el-table
                ref="multipleTable"
                :data="tableData"
                border
                size="mini"
                fit
                highlight-current-row
                height="500"
                v-loading="loading"
                @selection-change="handleSelectionChange"
                @sort-change="sortChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值), active: 是否有操作列
                active.name: 操作列字段名称, active.clickFun: 操作列点击事件, formatData: 格式化内容-->
                <el-table-column
                    v-for="(item, key) in tableHeader"
                    :key="key"
                    :prop="item.prop"
                    :label="item.label"
                    :fixed="item.fixed"
                    :min-width="item.minWidth"
                    align="center"
                    :sortable="item.sortable"
                >
                    <template slot-scope="scope">
                        <div v-if="item.active">
                            <el-button
                                v-for="(o, key) in item.active"
                                :key="key"
                                @click="handleActive(scope.row, o.router, o.routerId)"
                                type="text"
                                size="small"
                            >{{o.name}}</el-button>
                        </div>
                        <div v-else>
                            <a
                                class="btn-a"
                                v-if="item.router"
                                @click="handleActive(scope.row,item.router, item.routerId)"
                            >
                                <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
                                <span
                                    v-else
                                >{{ scope.row[item.prop] | formatters(item.formatData) }}</span>
                            </a>
                            <div v-else>
                                <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
                                <span
                                    v-else
                                >{{ scope.row[item.prop] | formatters(item.formatData) }}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination" v-if="pageShow">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="pagination.pageIndex"
                    :page-size="pagination.pageSize"
                    :total="pagination.pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </template>
        <template v-else>
            <div class="no-data">暂无数据</div>
        </template>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main.js';
import config from '../../../utils/config';
var _ = require('lodash');
console.log(config, 'config');
export default {
    props: {
        tableData: {
            type: Array,
            default: function() {
                return [];
            }
        },
        tableHeader: {
            type: Array,
            default: function() {
                return [];
            }
        },
        loading: {
            type: Boolean,
            default: false
        },
        pagination: {
            type: Object,
            default: {
                pageIndex: 1,
                pageSize: 10,
                pageTotal: 0
            }
        },
        pageShow: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            multipleSelection: []
        };
    },
    methods: {
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.$emit('selectFun', { backData: this.multipleSelection });
        },
        // 分页导航
        handlePageChange(val) {
            console.log('handlePageChange:', val);
            this.$set(this.pagination, 'pageIndex', val);
            //this.$emit('pageChange', { backData: this.newPagination });
            this.$emit('pageChange', { backData: this.pagination });
        },
        // row:本行数据，route：要跳转的路由路径，跳转要传的参数routeId
        handleActive(row, route, routeId) {
            console.log(row);
            this.$router.push({
                path: '/' + route,
                query: {
                    id: row[routeId]
                }
            });
        },
        //后端排序
        sortChange(column) {
            //console.log('sortChange:', column);
            this.$emit('sortChange', { backData: column });
        },
        //清空排序
        clearSort() {
            this.$refs.multipleTable.clearSort();
        }
    },
    watch: {
        // pagination(nval) {
        //     this.newPagination = _.cloneDeep(nval);
        // }
    },
    computed: {},
    created() {}
};
</script>

<style scoped>
.btn-a {
    color: #409eff;
    cursor: pointer;
}
.no-data {
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 40px;
}
</style>
